<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ResponseVO-统一的结果处理</title>
    <link rel="stylesheet" href="/js/index.css">
</head>
<body>
<div id="app">
    <el-button type="danger" @click="getData">点击按钮</el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>

        <el-table-column prop="empName" label="姓名" width="180"></el-table-column>

        <el-table-column prop="gender" label="性别" width="180"></el-table-column>

        <el-table-column prop="salary" label="工资" width="180"></el-table-column>

        <el-table-column prop="deptid" label="部门编号" width="180"></el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 5, 7]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/index.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            tableData: [],      // 声明数据
            currentPage: 1,     // 起始页
            pagesize: 3,        // 每页显示的数据
            total:  0           // 总数默认为 0
        },
        methods: {
            // 获取数据
            getData() {
                vm.fetchData(vm.currentPage, vm.pagesize);
            },
            // 处理当前页
            handleSizeChange(v) {
                vm.fetchData(vm.currentPage, v)
            },
            // 处理当前页显示数据
            handleCurrentChange(v) {
                vm.fetchData(v, vm.pagesize)
            },
            // 获取数据
            fetchData(pageno, pagesize) {
                vm.tableData = []   // 先清空数据再请求
                vm.total = 0        // 总数量默认为 0
                axios.get("/ajaxPageVo?pagenum=" + pageno + "&pagesize=" + pagesize)
                    .then(function (resp) {
                        console.log(resp)
                        if (resp.data.code == 200) {
                            // resp.data 代表的是 axios 获取数据的方法
                            // resp.data.data（第二个 data 是 ResultVO 对象的 data 属性）
                            vm.tableData = resp.data.data.list
                            vm.total = resp.data.data.total
                            vm.currentPage = resp.data.data.pageNum
                            vm.pagesize = resp.data.data.pageSize
                        } else {
                            alert(resp.data.msg)
                        }
                })
            }
        }
    })
</script>
</body>
</html>